
/**************************************************************

	Script		: Wireframer
	Version		: 1.0
	Authors		: Samuel Birch
	Desc		: 

**************************************************************/

var Wireframer = new Class({
	
	getOptions: function(){
		return {
			gridSize: 10
		};
	},

	initialize: function(contentArea, options){
		this.setOptions(this.getOptions(), options);
		
		this.contentArea = $(contentArea);
		
		this.contentArea.addEvent('mousedown', this.start.bind(this));
		
	},
	
	start: function(event){
		var event = new Event(event);
		this.mouse = event.page;
		//console.log(this.mouse);
		
		var pos = this.contentArea.getCoordinates();
		//console.log(pos);
		var y = this.mouse.y - pos.top-1;
		var x = this.mouse.x - pos.left-1;
		
		var newPos = this.checkPosition(x,y);
		
		var frame = new Element('div').addClass('frame').setStyles({
			position: 'absolute',
			top: newPos.y+'px',
			left: newPos.x+'px',
			zIndex: 1
		}).injectInside(this.contentArea);
		
		this.sortZ(frame);
		
		var header = new Element('div').addClass('header').injectInside(frame);
		var close = new Element('div').addClass('close').setHTML('x').injectInside(header);
		//var title = new Element('input').addClass('title').setProperties({type: 'text', value: 'Title'}).injectInside(header);
		var content = new Element('textarea').addClass('content').injectInside(frame).setStyles({
			width: frame.getStyle('width'),
			height: frame.getStyle('height')
		});
		var resize = new Element('div').addClass('resize').injectInside(frame);
		
		frame.addEvent('mouseover',this.clearMousedown.bind(this));
		frame.addEvent('mouseout',function(){
			this.contentArea.addEvent('mousedown', this.start.bind(this));
		}.bind(this));
		
		content.addEvent('focus', function(){
			this.sortZ(frame);
		}.bind(this));
		
		close.addEvent('click', function(){
			frame.remove();
			this.contentArea.addEvent('mousedown', this.start.bind(this));
		}.bind(this));
		
		//this.resizeObj = this.frame.makeResizable({limit: {x:[0,pos.width-x-2], y:[0,pos.height-y-2]}}).start(event);
		//console.log(pos.width-x)
		frame.makeResizable({
			handle: resize, 
			limit: {x:[0,this.getResizeWidth], y:[0,this.getResizeHeight]},
			containerSize: {width: pos.width, height:pos.height},
			onDrag: function(){
				if(window.ie){
					var w = 20;
					var h = 40;
				}else{
					var w = 10;
					var h = 30;
				}
				this.element.getElement('.content').setStyles({
					width: this.element.getStyle('width').toInt()-w+'px',
					height: this.element.getStyle('height').toInt()-h+'px'
				});
			}
		}).start(event);
		frame.makeDraggable({
			handle: header, 
			//onStart: this.sortZ.bind(this),
			onStart: this.sortZ,
			limit: {x:[0,this.getDragWidth], y:[0,this.getDragHeight]},
			containerSize: {width: pos.width, height:pos.height}
		});
		
		event.stop();
	},
	
	clearMousedown: function(){
		this.contentArea.removeEvents();
	},
	
	getResizeWidth: function(){
		return this.options.containerSize.width - this.element.getStyle('left').toInt();
	},
	
	getResizeHeight: function(){
		return this.options.containerSize.height - this.element.getStyle('top').toInt();
	},
	
	getDragWidth: function(){
		return this.options.containerSize.width - this.element.getStyle('width').toInt()-1;
	},
	
	getDragHeight: function(obj){
		return this.options.containerSize.height - this.element.getStyle('height').toInt()-1;
	},
	
	checkPosition: function(x,y){
		var pos = {};
		pos.x = (Math.round(x/this.options.gridSize)*this.options.gridSize)-1;
		pos.y = (Math.round(y/this.options.gridSize)*this.options.gridSize)-1;
		return pos;
	},
	
	sortZ: function(obj){
		$$('.frame').each(function(el){
			el.setStyles({zIndex: 1});
		});
		obj.setStyles({zIndex: 2});
	}
	
	
});
Wireframer.implement(new Options);
Wireframer.implement(new Events);


/*************************************************************/

